<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>Thymeleaf的入门</title>
</head>
<body>
<!--
    Thymeleaf标签使用， 需要再指定的标签上使用Thymeleaf相关的语法
    th:text = "":输出文本内容
--->
<!--输出hello数据-->
<p th:text="${hello}"></p>

<!--
    th:action:定义后台控制器路径， 类似<form>标签的action属性
-->
<form id="login-form" th:action="@{/test/hello}">
    <button>提交</button>
</form>

<!--
    th:each : 对象遍历
-->
<table>
    <tr>
        <td>下标</td>
        <td>编号</td>
        <td>姓名</td>
        <td>住址</td>
    </tr>
    <tr th:each="user, userStat:${users}">
        <td>
            下标：<span th:text="${userStat.index}"></span>,
        </td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.address}"></td>
    </tr>
</table>

<!--
    Map输出
-->
<div th:each="map, mapStats:${dataMap}">
    <div th:text="${map}"></div>
    key:<span th:text="${mapStats.current.key}"></span> <br/>
    key:<span th:text="${mapStats.current.value}"></span> <br/>
    ==========================================================
</div>

<!--
    数组输出
-->
<div th:each="name, nameStats:${names}">
    <span th:text="${nameStats.count}"></span>
    <span th:text="${name}"></span>
</div>

<!--
    日期输出
-->
<div>
    <span th:text="${#dates.format(now, 'yyyy-MM-dd hh:ss:mm')}"></span>
</div>

<!--
    if条件
-->
<div>
    <span th:if="${age >= 18}">已成人</span>
</div>

<!--
    使用javascript
-->
<button onclick="abc()">aaa</button>

<!--
    使用||进行字符拼接
-->
<a th:class="|${class1} ${class2}|">aasfsafas</a>
</body>
<script th:inline="javascript">
    var hhh = [[${hello}]];
    function abc() {
        alert(hhh);
    }
</script>
</html>